import React from "react";
import type { SpinProps } from "./type";

export default function Spin({ spinning = true, children }: SpinProps) {
  const SpinElement = (
    <div className="ct0-spin-spinning" data-testid="spin">
      <span className="ct0-spin-dot">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </span>
    </div>
  );

  if (!children) return SpinElement;

  return (
    <div className="ct0-spin-nested">
      {spinning && SpinElement}
      <div
        className={
          spinning
            ? "ct0-spin-container ct0-spin-container-spinning"
            : "ct0-spin-container"
        }
      >
        {children}
      </div>
    </div>
  );
}
